<template>
	<view class="bind-mobile">
		<uni-forms ref="form" :modelValue="formData" :rules="rules" label-position="top">
			<uni-forms-item label="手机号" name="mobile">
				<uni-easyinput :maxlength="11" type="number" v-model="formData.mobile" placeholder="请输入手机号" />
			</uni-forms-item>
			<uni-forms-item label="验证码" name="code">
				<view class="code-box">
					<view class="input">
						<uni-easyinput type="number" v-model="formData.code" placeholder="请输入验证码" />
					</view>
					<view v-if="show" class="btn"><text class="code-btn" @click="getCode">发送验证码</text></view>
					<view v-else class="btn"><text class="code-btn grey" @click="getCode">重新发送({{count}})</text></view>
				</view>
			</uni-forms-item>
		</uni-forms>
		<view style="height: 5rpx;"></view>
		<button class="mt15" type="primary" @click="submit">绑定</button>
		
		<view style="height: 10rpx;"></view>
		<button type="default" class="mt15" @click="goBack">暂不绑定</button>

	</view>
</template>


<script>
	import {
		getCurrentPath,
		getUrlOption,
	} from '@/utils/methods.js'
	import {
		getSMSCode
	} from '@/service/login'
	import {
		bindMobile
	} from '@/service/user'
	export default {
		data() {
			return {
				// 表单数据
				dis: false,
				show: true,
				timer: null, //设置计时器,
				count: "",
				formData: {
					mobile: '',
					code: ''
				},
				rules: {
					// 对name字段进行必填验证
					mobile: {
						rules: [{
							required: true,
							errorMessage: '请输入手机号',
						}, {
							validateFunction: function(rule, value, data, callback) {
								const reg = /^1[3456789]\d{9}$/
								if (!value) {
									callback('请输入手机号')
								}
								if (reg.test(value)) {
									return true
								} else {
									callback('手机号不正确')
								}
								return true
							}
						}]
					},
					// 对email字段进行必填验证
					code: {
						rules: [{
							required: true,
							errorMessage: '请输入验证码',
						}]
					}
				}
			}
		},
		methods: {
			countStart() {
				let TIME_COUNT = 60;
				if (!this.timer) {
					this.count = TIME_COUNT;
					this.show = false;
					this.dis = true;
					this.timer = setInterval(() => {
						if (this.count > 0 && this.count <= TIME_COUNT) {
							this.count--;
						} else {
							this.dis = false;
							this.show = true;
							clearInterval(this.timer);
							this.timer = null;
						}
					}, 1000);
				}
			},
			async getCode() {
				if (this.dis) {
					return
				}
				await this.$refs.form.validateField('mobile')
				const res = await getSMSCode({
					mobile: this.formData.mobile
				})
				if (res.code === 0) {
					this.countStart()
				}

			},
			async submit() {
				await this.$refs.form.validate()
				const res = await bindMobile({
					type: '1',
					mobile: this.formData.mobile,
					code: this.formData.code
				})
				const {
					code,
					data
				} = res
				if (code !== 0) {
					return
				}
				uni.setStorageSync('token', data.token)
				uni.setStorageSync('bound', true)
				this.goBack()

			},
			getBackUrl() {
				const backurl = getUrlOption().backUrl
				const path = decodeURIComponent(decodeURIComponent(backurl || ''))
				return path || '/pages/tabBar/home/index'
			},
			goBack() {
				const path = this.getBackUrl()
				uni.redirectTo({
					url: path,
					fail: () => {
						uni.switchTab({
							url: path
						})
					}
				});
			}
		}
	}
</script>
<style lang="scss">
	.bind-mobile {
		padding: 20rpx 25rpx;

		.code-box {
			display: flex;
			align-items: center;
			flex-direction: row;

			.input {

				flex: 1;
			}

			.btn {
				margin-left: 10rpx;

				&:active {
					opacity: 0.5;
				}

				.code-btn {
					font-size: 25rpx;
					color: #2979ff
				}

				.grey {
					color: #dcdcdc;
				}
			}
		}


		.mt15 {
			margin-top: 20rpx;
		}
	}
</style>
